<script lang="ts">
import Create from '../components/Create.vue'
import { defineComponent } from 'vue'
import { useRouter } from 'vue-router'
import { onMounted, ref, onUnmounted } from 'vue'
import { getCiib, getStell, getElis, getCarsel, getMeat, getPaint } from '../api/stall'
import { getUser, getSep, getTang, getTwo, getPour } from '../api/stall' //用户id
import { getClass, getFur, getPuzzle, getYousha, getDesign, getDiye } from '../api/stall' //分类

export default defineComponent({
  components: {
    Create
  },

  setup() {
    // 上新尝鲜

    var Ciib: any = ref<Array<any>>([])
    const getCiibFun = () => {
      getCiib().then((data: any) => {
        // console.log(data);
        Ciib.value = data.data.list
      })
    }
    //轮播getStell
    var Stell: any = ref<Array<any>>([])
    const getStellFun = () => {
      getStell().then((data: any) => {
        // console.log(data);
        Stell.value = data.data.list
      })
    }

    //  轮播图2
    var Elis: any = ref<Array<any>>([])
    const getElisFun = () => {
      getElis().then((data: any) => {
        // console.log(data);
        Elis.value = data.data.list
      })
    }

    var Carsel: any = ref<Array<any>>([])
    const getCarselFun = () => {
      getCarsel().then((data: any) => {
        // console.log(data);
        Carsel.value = data.data.list
      })
    }
    //不吃生肉
    var Meatl: any = ref<Array<any>>([])
    const getMeatlFun = () => {
      getMeat().then((data: any) => {
        // console.log(data);
        Meatl.value = data.data.list
      })
    }
    //  画画
    var Paint: any = ref<Array<any>>([])
    const getPaintFun = () => {
      getPaint().then((data: any) => {
        // console.log(data);
        Paint.value = data.data.list
      })
    }

    // 用户ID
    var User: any = ref<Array<any>>([])
    const getUserFun = () => {
      getUser().then((data: any) => {
        // console.log(data);
        User.value = data.data
        console.log(User.value)
      })
    }
    //  eg  getSep
    var sep: any = ref<Array<any>>([])
    const getSepFun = () => {
      getSep().then((data: any) => {
        // console.log(data);
        sep.value = data.data
        console.log(sep.value)
      })
    }

    // 微糖
    var tang: any = ref<Array<any>>([])
    const getTangFun = () => {
      getTang().then((data: any) => {
        // console.log(data);
        tang.value = data.data
        console.log(sep.value)
      })
    }
    //丙二烯

    var tow: any = ref<Array<any>>([])
    const getTwoFun = () => {
      getTwo().then((data: any) => {
        // console.log(data);
        tow.value = data.data
        console.log(sep.value)
      })
    }
    //玳玳
    var pour: any = ref<Array<any>>([])
    const getPourFun = () => {
      getPour().then((data: any) => {
        // console.log(data);
        pour.value = data.data
        console.log(sep.value)
      })
    }

    //   游戏分类1
    var Class: any = ref<Array<any>>([])
    const getClassFun = () => {
      getClass().then((data: any) => {
        // console.log(data);
        Class.value = data.data.list
        console.log(Class.value)
      })
    }
    //   游戏分类  2
    var fur: any = ref<Array<any>>([])
    const getFurFun = () => {
      getFur().then((data: any) => {
        // console.log(data);
        fur.value = data.data.list
        console.log(Class.value)
      })
    }

    //跳转作者
    const getUid = (path: any, uid: any) => {
      console.log(uid)
      router.push({
        path,
        query: {
          uid
        }
      })
    }

    //跳转详情
    const Dode = (path: any, goods_id: any) => {
      console.log(goods_id)

      router.push({
        path,
        query: {
          goods_id // 商品id
        }
      })
    }

    //崩铁
    var diyelist: any = ref<Array<any>>([])
    const getDiyeFun = () => {
      getDiye().then((data: any) => {
        console.log(data)
        diyelist.value = data.data.list
        // console.log( Class.value)
      })
    }

    //未定事件薄
    var puzzle: any = ref<Array<any>>([])
    const getPuzzleFun = () => {
      getPuzzle().then((data: any) => {
        console.log(data)
        puzzle.value = data.data.list
      })
    }
    //
    var yousha: any = ref<Array<any>>([])
    const getYoushaFun = () => {
      getYousha().then((data: any) => {
        console.log(data)
        yousha.value = data.data.list
      })
    }
    //别墅
    var design: any = ref<Array<any>>([])
    const getDesignFun = () => {
      getDesign().then((data: any) => {
        console.log(data)
        design.value = data.data.list
      })
    }

    onMounted(() => {
      getCiibFun() // 上新尝鲜
      getStellFun() //轮播getStell
      getElisFun() //轮播getElis
      getCarselFun() // 轮播getCarsel
      getMeatlFun() //轮播4
      getPaintFun()
      getUserFun() // 用户ID
      getClassFun() //分类
      getSepFun()
      getTangFun() //微糖
      getTwoFun() //丙二烯
      getPourFun() //玳玳
      window.addEventListener('scroll', handleScroll) //监听滚动事件
      getFurFun(), getPuzzleFun(), getYoushaFun(), getDesignFun()
    })

    onUnmounted(() => {
      window.removeEventListener('scroll', handleScroll) //离开页面时移除监听事件
    })

    const detailHander = (path: any, goods_id: any) => {
      router.push({
        path,
        query: {
          goods_id
        }
      })
    }

    const goSearch = (path: any) => {
      router.push({
        path
      })
    }

    const goHome = (path: any) => {
      router.push({
        path
      })
    }

    // 返回顶部按钮

    const backTopFlag = ref(false) //用来判断样式
    const backTop = () => {
      let top = document.documentElement.scrollTop //获取点击时页面的滚动条纵坐标位置
      const timeTop = setInterval(() => {
        document.documentElement.scrollTop = top -= 50 //一次减50往上滑动
        if (top <= 0) {
          clearInterval(timeTop)
        }
      }, 5) //定时调用函数使其更顺滑
    }
    const handleScroll = () => {
      if (document.documentElement.scrollTop > 20) {
        backTopFlag.value = true
      } else {
        backTopFlag.value = false
      }
      //往下滑超过20则显示 否则则不显示按钮
    }

    let router: any = useRouter()
    return {
      active: 2,
      Ciib, // 上新尝鲜
      Stell, //轮播getStell
      Elis, //轮播getElis
      Carsel,
      Meatl,
      Paint,
      User,
      getUid,
      Class,
      Dode,
      sep,
      tang,
      tow,
      pour,
      fur,
      detailHander,
      goSearch,
      goHome,
      diyelist,
      puzzle,
      yousha,
      design,
      backTopFlag,
      backTop
    }
  }
})
</script>

<template>
  <van-sticky :offset-top="0">
    <div class="mhy-no">
      <div class="rile" @click="goHome('/')"><span class="iconfont icon-zuojian"></span></div>
      <div class="no" @click="goSearch('/search')">
        <div class="iconfont icon-sousuo">
          <span class="xu">崩坏3同人周边</span>
        </div>
      </div>

      <div class="leftl">
        <div class="tle"><span class="iconfont icon-sangedian"></span></div>
      </div>
    </div>
  </van-sticky>
  <div class="lits">
    <img src="../assets/img/42.jpg" alt="" />
  </div>
  <div class="lits">
    <img src="../assets/img/43.jpg" alt="" />
  </div>
  <div class="box">
    <div class="imgs"><img src="../assets/img/45.jpg" alt="" /></div>

    <div class="list">
      <div class="lazy">
        <ul>
          <li
            v-for="item in Ciib"
            :key="item.goods_id"
            @click="detailHander('/detail', item.goods_id)"
          >
            <div class="card-img">
              <!-- <img src="../assets/img/46.jpg" alt=""> -->
              <img :src="item.cover_url" v-lazy="item.cover_url" alt="" />
            </div>
            <div class="one">
              <!-- 【EGOTDC24】崩坏3同人周边-崩坏3角色系列 立牌 礼服系列角色立牌 -->
              {{ item.name }}
            </div>
            <div class="price">
              <span>¥</span>
              <span>
                <!-- 50 -->
                {{ (item.market_price / 100).toFixed(2) }}
              </span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="silds">
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" :show-indicators="false">
      <van-swipe-item>
        <div class="slick">
          <div class="imges">
            <div class="tatle">
              <img :src="User.avatar_url" alt="" />
            </div>
            <div class="name">
              {{ User.nickname }}
              <!-- {{User.nickname}} -->
            </div>
            <div class="lay" @click="getUid('/cabiet', User.uid)">
              ta的橱柜
              <span class="iconfont icon-youjiantou"></span>
            </div>

            <!-- <div class="liy">111</div> -->
          </div>

          <!-- 轮播人物 -->
          <div class="resol">
            <ul>
              <li
                v-for="item in Stell"
                :key="item.goods_id"
                @click="detailHander('/detail', item.goods_id)"
              >
                <div class="photo">
                  <!-- <img src="../assets/img/48.jpg" alt=""> -->
                  <img :src="item.cover_url" alt="" />
                </div>
                <div class="galle">
                  <!-- 【ciki1】原神同人周边-人物趴趴系列 马口铁徽章 75mm双闪徽章 -->
                  {{ item.name }}
                </div>

                <div class="oto">
                  <span>¥</span
                  ><span class="max">
                    <!-- 50.00 -->
                    {{ (item.market_price / 100).toFixed(2) }}
                  </span>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </van-swipe-item>

      <!-- 轮播 2 -->
      <van-swipe-item>
        <div class="slick">
          <div class="imges">
            <div class="tatle">
              <img :src="sep.avatar_url" alt="" />
            </div>
            <div class="name">
              {{ sep.nickname }}
              <!-- {{User.nickname}} -->
            </div>
            <div class="lay" @click="getUid('/cabiet', sep.uid)">
              ta的橱柜
              <span class="iconfont icon-youjiantou"></span>
            </div>

            <!-- <div class="liy">111</div> -->
          </div>

          <div class="resol">
            <ul>
              <li
                v-for="item in Elis"
                :key="item.goods_id"
                @click="detailHander('/detail', item.goods_id)"
              >
                <div class="photo">
                  <!-- <img src="../assets/img/48.jpg" alt=""> -->
                  <img :src="item.cover_url" alt="" />
                </div>
                <div class="galle">
                  <!-- 【ciki1】原神同人周边-人物趴趴系列 马口铁徽章 75mm双闪徽章 -->
                  {{ item.name }}
                </div>

                <div class="oto"><span>¥</span><span class="max">50.00</span></div>
              </li>
            </ul>
          </div>
        </div>
      </van-swipe-item>

      <!-- 轮播3 -->
      <van-swipe-item>
        <div class="slick">
          <div class="imges">
            <div class="tatle">
              <img :src="tang.avatar_url" alt="" />
            </div>
            <div class="name">
              {{ tang.nickname }}
              <!-- {{User.nickname}} -->
            </div>

            <div class="lay" @click="getUid('/cabiet', tang.uid)">
              ta的橱柜
              <span class="iconfont icon-youjiantou"></span>
            </div>

            <!-- <div class="liy">111</div> -->
          </div>

          <div class="resol">
            <ul>
              <li
                v-for="item in Carsel"
                :key="item.goods_id"
                @click="detailHander('/detail', item.goods_id)"
              >
                <div class="photo">
                  <!-- <img src="../assets/img/48.jpg" alt=""> -->
                  <img :src="item.cover_url" alt="" />
                </div>
                <div class="galle">
                  <!-- 【ciki1】原神同人周边-人物趴趴系列 马口铁徽章 75mm双闪徽章 -->
                  {{ item.name }}
                </div>

                <div class="oto"><span>¥</span><span class="max">50.00</span></div>
              </li>
            </ul>
          </div>
        </div>
      </van-swipe-item>

      <!-- 轮播4 -->
      <van-swipe-item>
        <div class="slick">
          <div class="imges">
            <div class="tatle">
              <img :src="tow.avatar_url" alt="" />
            </div>

            <div class="name">
              {{ tow.nickname }}
              <!-- {{User.nickname}} -->
            </div>
            <div class="lay" @click="getUid('/cabiet', tow.uid)">
              ta的橱柜
              <span class="iconfont icon-youjiantou"></span>
            </div>

            <!-- <div class="liy">111</div> -->
          </div>

          <div class="resol">
            <ul>
              <li
                v-for="item in Meatl"
                :key="item.goods_id"
                @click="detailHander('/detail', item.goods_id)"
              >
                <div class="photo">
                  <!-- <img src="../assets/img/48.jpg" alt=""> -->
                  <img :src="item.cover_url" alt="" v-lazy="item.cover_url" />
                </div>
                <div class="galle">
                  <!-- 【ciki1】原神同人周边-人物趴趴系列 马口铁徽章 75mm双闪徽章 -->
                  {{ item.name }}
                </div>

                <div class="oto"><span>¥</span><span class="max">50.00</span></div>
              </li>
            </ul>
          </div>
        </div>
      </van-swipe-item>

      <!-- 轮播5 -->
      <van-swipe-item>
        <div class="slick">
          <div class="imges">
            <div class="tatle">
              <img :src="pour.avatar_url" alt="" />
            </div>

            <div class="name">
              {{ pour.nickname }}
              <!-- {{User.nickname}} -->
            </div>
            <div class="lay" @click="getUid('/cabiet', pour.uid)">
              ta的橱柜
              <span class="iconfont icon-youjiantou"></span>
            </div>

            <!-- <div class="liy">111</div> -->
          </div>
          <div class="resol">
            <ul>
              <li
                v-for="item in Paint"
                :key="item.goods_id"
                @click="detailHander('/detail', item.goods_id)"
              >
                <div class="photo">
                  <!-- <img src="../assets/img/48.jpg" alt=""> -->
                  <img :src="item.cover_url" alt="" v-lazy="item.cover_url" />
                </div>
                <div class="galle">
                  <!-- 【ciki1】原神同人周边-人物趴趴系列 马口铁徽章 75mm双闪徽章 -->
                  {{ item.name }}
                </div>

                <div class="oto"><span>¥</span><span class="max">50.00</span></div>
              </li>
            </ul>
          </div>
        </div>
      </van-swipe-item>
    </van-swipe>
  </div>
  <!-- 游戏分类 -->
  <van-tabs v-model:active="active" scrollspy sticky>
    <van-tab :title="'原神 '">
      <!-- <div class="in-list"><img src="../assets/img/52.jpg" alt=""></div> -->
      <div class="list-no">
        <div class="loading">
          <ul>
            <li
              v-for="item in Class"
              :key="item.goods_id"
              @click="detailHander('/detail', item.goods_id)"
            >
              <div class="card__title">
                <!-- <img src="../assets/img/11.jpg" alt=""> -->
                <img :src="item.cover_url" alt="" v-lazy="item.cover_url" />
              </div>
              <h5 class="lis">
                <span class="tss">
                  <!-- <img src="../assets/img/12.jpg" alt=""> -->
                </span>
                <span class="card">
                  <!-- 【月舞阁】原神同人周边-人物系列 马口铁徽章 山楂 节日主题 -->
                  {{ item.name }}
                </span>
              </h5>
              <div class="rd">
                <span class="let-1">¥</span>
                <span class="let-2">
                  <!-- 1111 -->
                  {{ (item.market_price / 100).toFixed(2) }}
                </span>
                <!-- <span class="let-3">.00</span> -->
              </div>
            </li>
          </ul>
        </div>
      </div>

      <div class="list-no">
        <div class="loading">
          <ul>
            <li
              v-for="item in fur"
              :key="item.goods_id"
              @click="detailHander('/detail', item.goods_id)"
            >
              <div class="card__title">
                <!-- <img src="../assets/img/11.jpg" alt=""> -->
                <img :src="item.cover_url" alt="" v-lazy="item.cover_url" />
              </div>
              <h5 class="lis">
                <span class="tss">
                  <!-- <img src="../assets/img/12.jpg" alt=""> -->
                </span>
                <span class="card">
                  <!-- 【月舞阁】原神同人周边-人物系列 马口铁徽章 山楂 节日主题 -->
                  {{ item.name }}
                </span>
              </h5>
              <div class="rd">
                <span class="let-1">¥</span>
                <span class="let-2">
                  <!-- 1111 -->
                  {{ (item.market_price / 100).toFixed(2) }}
                </span>
                <!-- <span class="let-3">.00</span> -->
              </div>
            </li>
          </ul>
        </div>
      </div>
    </van-tab>

    <van-tab :title="'崩坏3 '">
      <!-- 游戏分类2 -->
      <div class="list-no">
        <div class="loading">
          <ul>
            <li
              v-for="item in diyelist"
              :key="item.goods_id"
              @click="detailHander('/detail', item.goods_id)"
            >
              <div class="card__title">
                <!-- <img src="../assets/img/11.jpg" alt=""> -->
                <img :src="item.cover_url" alt="" v-lazy="item.cover_url" />
              </div>
              <h5 class="lis">
                <span class="tss">
                  <!-- <img src="../assets/img/12.jpg" alt=""> -->
                </span>
                <span class="card">
                  <!-- 【月舞阁】原神同人周边-人物系列 马口铁徽章 山楂 节日主题 -->
                  {{ item.name }}
                </span>
              </h5>
              <div class="rd">
                <span class="let-1">¥</span>
                <span class="let-2">
                  <!-- 1111 -->
                  {{ (item.market_price / 100).toFixed(2) }}
                </span>
                <!-- <span class="let-3">.00</span> -->
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="in-list"><img src="../assets/img/53.jpg" alt="" /></div>
    </van-tab>

    <van-tab :title="'未定事件薄 '">
      <div class="list-no">
        <div class="loading">
          <ul>
            <li
              v-for="item in puzzle"
              :key="item.goods_id"
              @click="detailHander('/detail', item.goods_id)"
            >
              <div class="card__title">
                <!-- <img src="../assets/img/11.jpg" alt=""> -->
                <img :src="item.cover_url" alt="" v-lazy="item.cover_url" />
              </div>
              <h5 class="lis">
                <span class="tss">
                  <!-- <img src="../assets/img/12.jpg" alt=""> -->
                </span>
                <span class="card">
                  <!-- 【月舞阁】原神同人周边-人物系列 马口铁徽章 山楂 节日主题 -->
                  {{ item.name }}
                </span>
              </h5>
              <div class="rd">
                <span class="let-1">¥</span>
                <span class="let-2">
                  <!-- 1111 -->
                  {{ (item.market_price / 100).toFixed(2) }}
                </span>
                <!-- <span class="let-3">.00</span> -->
              </div>
            </li>
          </ul>
        </div>
      </div>
    </van-tab>
    <van-tab :title="'米游社 '">
      <div class="list-no">
        <div class="loading">
          <ul>
            <li
              v-for="item in yousha"
              :key="item.goods_id"
              @click="detailHander('/detail', item.goods_id)"
            >
              <div class="card__title">
                <!-- <img src="../assets/img/11.jpg" alt=""> -->
                <img :src="item.cover_url" alt="" v-lazy="item.cover_url" />
              </div>
              <h5 class="lis">
                <span class="tss">
                  <!-- <img src="../assets/img/12.jpg" alt=""> -->
                </span>
                <span class="card">
                  <!-- 【月舞阁】原神同人周边-人物系列 马口铁徽章 山楂 节日主题 -->
                  {{ item.name }}
                </span>
              </h5>
              <div class="rd">
                <span class="let-1">¥</span>
                <span class="let-2">
                  <!-- 1111 -->
                  {{ (item.market_price / 100).toFixed(2) }}
                </span>
                <!-- <span class="let-3">.00</span> -->
              </div>
            </li>
          </ul>
        </div>
      </div>

      <div class="in-list"><img src="../assets/img/55.jpg" alt="" /></div>
    </van-tab>

    <van-tab :title="'大别墅'">
      <div class="list-no">
        <div class="loading">
          <ul>
            <li
              v-for="item in design"
              :key="item.goods_id"
              @click="detailHander('/detail', item.goods_id)"
            >
              <div class="card__title">
                <!-- <img src="../assets/img/11.jpg" alt=""> -->
                <img :src="item.cover_url" alt="" v-lazy="item.cover_url" />
              </div>
              <h5 class="lis">
                <span class="tss">
                  <!-- <img src="../assets/img/12.jpg" alt=""> -->
                </span>
                <span class="card">
                  <!-- 【月舞阁】原神同人周边-人物系列 马口铁徽章 山楂 节日主题 -->
                  {{ item.name }}
                </span>
              </h5>
              <div class="rd">
                <span class="let-1">¥</span>
                <span class="let-2">
                  <!-- 1111 -->
                  {{ (item.market_price / 100).toFixed(2) }}
                </span>
                <!-- <span class="let-3">.00</span> -->
              </div>
            </li>
          </ul>
        </div>
      </div>
    </van-tab>
  </van-tabs>
  <Create :active="0" />

  <!-- 返回顶部 -->
  <div :class="backTopFlag ? 'active' : 'inactive'" @click="backTop">
    <i class="iconfont icon-shangjiantou"></i>
  </div>
</template>

<style lang="scss" scoped>
@import url(../../src/assets/font01/iconfont.css);

// 返回按钮

.active {
  position: fixed;
  right: 20px;
  bottom: 110px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.95);
  animation: active 1s;
  -webkit-animation: active 1s;
  overflow: hidden;
  i {
    font-size: 12px;
    color: rgb(197, 197, 203);
  }
}
@keyframes active {
  0% {
    height: 0px;
  }

  100% {
    height: 40px;
  }
}
.inactive {
  position: fixed;
  right: 20px;
  bottom: 110px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 50%;
  animation: inactive 1s;
  -webkit-animation: inactive 1s;
  animation-fill-mode: forwards;
  overflow: hidden;
  i {
    font-size: 12px;
    color: rgb(197, 197, 203);
  }
}

@keyframes inactive {
  0% {
    height: 40px;
  }

  100% {
    height: 0px;
  }
}

.lits {
  width: 100%;
  height: auto;
}

.lits img {
  width: 100%;
}

.in-list {
  width: 100%;
  height: auto;
}
.in-list img {
  width: 100%;
}

//  顶部搜索
.mhy-no {
  height: 45px;
  /* background-color: #ffffff; */
  display: flex;
  position: fixed;
  width: 100%;
  /* border-bottom: 1px solid #f3f3f5; */
  /* background: rgba(22,22,46,.3) */
}

.no {
  height: 34px;
  background-color: #f9f9f9;
  margin-left: 11px;
  width: 80%;
  margin-top: 5px;
  border-radius: 14px;
  padding-right: 50px;
  display: flex;
  background: rgba(22, 22, 46, 0.3);
}

.leftl {
  height: 32px;
  background-color: #ffffff;
  border: 1px solid #f6f6f6;
  width: 15%;
  margin-right: 10px;
  margin-left: 5px;
  margin-top: 6px;
  border-radius: 20px;
  margin-right: 5px;
  background: rgba(22, 22, 46, 0.3);
}

.no .iconfont {
  line-height: 35px;
  padding-left: 10px;
  color: #ffffff;
}

.no .xu {
  font-size: 14px;
  margin-left: 2px;
  color: #e8e8e9;
}

.leftl .iconfont {
  padding-left: 2px;
  color: #ffffff;
}

.leftl .tle {
  height: 22px;
  width: 22px;
  margin: 0 auto;
  /* background-color: beige; */
  padding-top: 8px;
}

.rile {
  /* height: 20px;
    margin-top: 10px; */
  /* background-color: red; */
  width: 10%;
  margin-left: 10px;
  background: rgba(22, 22, 46, 0.3);
  width: 48px;
  height: 34px;
  border-radius: 50%;
  margin-top: 4px;
}

.rile .iconfont {
  line-height: 35px;
  padding-left: 8px;
  color: #ffffff;
}

.box {
  // width: 100%;
  height: 202px;
  margin: 0 auto;

  background: url(../assets/img/44.jpg) no-repeat;
  background-size: contain;
}

.imgs img {
  width: 100%;
}

.list {
  width: 100%;
  height: 220px;
  // background-color: red;
}

.lazy {
  // height: 220px;
  margin: 0 9px;
  // background-color: orange;
  display: flex;
}

.lazy ul {
  width: 100%;
  display: flex;
  height: 187px;
}

.lazy li {
  width: 33%;
  height: 149px;
  background-color: #ffffff;
  margin-left: 7px;
  margin: 0 7px;
  border-radius: 6px;
}

.card-img {
  // width: 112px;
  height: 110px;
}

.card-img img {
  width: 100%;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.one {
  width: 95px;
  // height: 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-top: 1px;
  padding-left: 10px;
}

.price {
  padding-left: 10px;
  margin-top: 4px;
}

.price span {
  font-weight: 700;
  font-family: 'Fira Sans Black Italic';
  font-style: italic;
}

.silds {
  width: 100%;
  height: 341px;
  background-color: #fff4c2;
}

.slick {
  height: 331px;

  margin: 0 10px;
  background-color: #f8f8f8;
  border-radius: 13px;
}

.imges {
  height: 53px;
  // background-color: orange;
  padding-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tatle {
  width: 50px;
  height: 50px;
  // background-color: blueviolet;
  margin-left: 10px;
  display: flex;
}

.tatle img {
  width: 100%;
  border-radius: 50%;
}

.name {
  font-size: 15px;
  padding-left: 10px;
  line-height: 50px;
  width: 201px;
}

.resol {
  margin: 0 10px;
  margin-top: 15px;
}

.resol ul {
  display: flex;
}

.resol li {
  height: 245px;
  background-color: #ffffff;
  margin-left: 5px;
  border-radius: 6px;
  width: 48%;
}

.photo {
  height: 169px;
}

.photo img {
  width: 100%;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.galle {
  padding-left: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  width: 137px;
  padding-top: 9px;

  line-height: 18px;
}

.oto {
  margin: 0 10px;
  margin-top: 6px;
}

.oto .max {
  font-weight: 700;
  font-family: 'Fira Sans Black Italic';
  font-style: italic;
  font-size: 15px;
}

.oto span {
  font-family: 'Fira Sans Black Italic';
  font-style: italic;
  font-weight: 700;
}

.list-no {
  width: 100%;
  height: 100%;
  background-color: #f3f3f4;
  padding-bottom: 19px;
}
.loading {
  margin: 0 18px;

  /* height: 700px; */
  /* background-color: orange; */
  display: flex;
}

.loading ul {
  display: flex;
  width: 100%;
  justify-content: space-between;
  flex-wrap: wrap;
}

.loading li {
  width: 48%;
  height: 230px;
  background-color: #ffffff;
  margin-top: 10px;
  border-radius: 8px;
}

/* .card__title{
   height: 145px; 
    background-color: firebrick; 
  } */
.card__title img {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;

  width: 100%;
}

.loading .lis {
  font-size: 15px;
  font-weight: 500;
  color: #2d2d49;
  line-height: 15px;
  margin: 0 10px;
  padding-top: 6px;
  line-height: 18px;
  overflow: hidden;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  /* height: 36px; */
  /* background-color: khaki; */
}

.loading .card {
  font-size: 14px;
}

.tss {
  //   width: 35px;
  /* height: 15px; */
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.tss img {
  width: 100%;
}

.rd {
  height: 17px;
  /* background-color: blueviolet; */
  margin: 0 10px;
  margin-top: 2px;
  display: flex;
}

.rd .let-1 {
  font-size: 10px;
  font-weight: 700;
  font-family: 'Fira Sans Black Italic';
  font-style: italic;
}

.rd .let-2 {
  font-size: 12px;
  font-weight: 700;
  font-family: 'Fira Sans Black Italic';
  font-style: italic;
}
.lay {
  margin-right: 15px;
  color: #d6d5db;
}
.lay .iconfont {
  font-size: 10px;
  color: #d6d5db;
}
</style>
